<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     
     
     
  
    google.load('visualization', '1', {packages: ['annotatedtimeline']});
    google.setOnLoadCallback(drawVisualization);
    
    function drawVisualization() {
      var jsonData = $.ajax({
          url: "get_user_data.php?subject_id="+document.select_plot.subject_id.value+"&itemid="+document.select_plot.itemid.value,
          dataType:"json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);


      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('visualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    }
    
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">

<form name='select_plot' >
<table>
	<tr>
		<td>Subject_id</td>
		<td>Itemid</td>	
	</tr>
	<tr>
			<td>
		
			<select name='subject_id' onChange="drawVisualization()">		
				<option>515</option>
				<option>894</option>	
				<option>2498</option>
				<option>3214</option>
				<option>6349</option>
				<option>7225</option>
				<option>8186</option>
				<option>11641</option>
				<option>14584</option>
				<option>16210</option>
				<option>16709</option>
				<option>17128</option>
				<option>18229</option>
				<option>18584</option>
				<option>21817</option>
				<option>22766</option>

			</select>		
		</td>
		<td>
			<select name='itemid' onChange="drawVisualization()">
				<option value="211">HR</option>
				<option value="618">RespRate</option>
				<option value="52">NI ABPm</option>
				<option value="456">I ABPm</option>
				<option value="676">Temp</option>
				<option value="780">pH</option>
				<option value="491">PAP Mean</option>
				<option value="492">PAP STD</option>
				
			</select>		
		</td>
	</tr>
</table>
</form>


<div id="visualization" style="width: 1200px; height: 500px;"></div>
</body>
</html>
​